<template>
    <view style="min-height: 100%;width: 100%;background-color: #FFFFFF;">
        <view class="box">
            <view>
                <view class="title">
                    <text>{{detail.title}}</text>
                </view>
                <view class="textdate">
                    <text class="text">{{detail.brief}}</text>
                    <text class="date">{{detail.utime | date}}</text>
                </view>
            </view>
            <view style="margin-top: 50rpx;width: 100%;overflow: hidden;word-wrap:break-word;">
                <view v-html="content()"></view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                detail: {},
            };
        },
        onLoad(options) {
            this._postArticleDetail(options.id);
        },
        methods: {
            content() {
                return this.detail.content
            },
            // 文章详情api
            _postArticleDetail(id) {
                uni.showLoading({
                    title: '加载中...'
                })
                this.$u.api.postArticleDetail({
                    article_id: id.toString(),
                    code: '999',
                }).then(res => {
                    this.detail = res
                    uni.hideLoading()
                }).catch(e => {
                    uni.hideLoading()
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        padding: 30rpx;
    }

    .title {
        font-size: 50rpx;
        color: #191919;
    }

    .textdate {
        margin-top: 60rpx;
        
        .text {
            font-size: 30rpx;
            color: #567798;
        }

        .date {
            margin-left: 40rpx;
            font-size: 30rpx;
            color: #bbbbbb;
        }
    }
</style>
